import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_svg/svg.dart';
import 'package:safetymonitor/app/core/ext/ext.dart';
import 'package:safetymonitor/generated/assets.dart';

///多功能带清除的TextField
///[text] 初始化默认值
///[softKeyboard] 是否需要弹出软键盘
///[suffixIcon] true：显示眼睛  false；隐藏眼睛
///[contentPadding] contentPadding属性来调整文本的垂直位置
///[node] 焦点
///[clickOnce] 清楚的回调
///[onChangedValue] 输入的值
///demo:
// MultifunctionalClearTextField(
//             contentPadding: const EdgeInsets.only(left: 8, top: 8),
//             suffixIcon: true,
//             softKeyboard: false,
//             text: '123456',
//             node: controller.nodeNewPassword,
//             clickOnce: controller.iconClick,
//             onChangedValue: (value) {
//               AppToast.showSuccess(value);
//             },
//           ),
class MultifunctionalClearTextField extends StatefulWidget {
  const MultifunctionalClearTextField({
    required this.clickOnce,
    required this.onChangedValue,
    required this.text,
    required this.node,
    this.softKeyboard = true,
    this.contentPadding = const EdgeInsets.only(left: 8),
    this.suffixIcon = false,
    super.key,
  });

  ///初始化默认值
  final String text;

  ///是否需要弹出软键盘
  final bool softKeyboard;

  ///true：显示眼睛  false；隐藏眼睛
  final bool suffixIcon;

  ///contentPadding属性来调整文本的垂直位置
  final EdgeInsets contentPadding;

  ///[node]焦点
  final FocusNode node;

  ///清楚的回调
  final VoidCallback clickOnce;

  ///输入的值
  final void Function(String value) onChangedValue;

  @override
  _MultifunctionalClearTextFieldState createState() => _MultifunctionalClearTextFieldState();
}

class _MultifunctionalClearTextFieldState extends State<MultifunctionalClearTextField> {
  final TextEditingController _controller = TextEditingController();
  bool _showClearIcon = false;
  bool _obscureText = false;

  @override
  void initState() {
    super.initState();

    ///初始化默认值
    _controller.text = widget.text;
    widget.node.addListener(() {
      if (widget.node.hasFocus && _controller.text.isNotEmpty) {
        //有焦点 有数据
        print('TextField has focus');
        setState(() {
          _showClearIcon = true;
        });
      } else {
        //有焦点 没数据
        //没焦点 没数据
        //没焦点 有数据
        print('TextField lost focus');
        setState(() {
          _showClearIcon = false;
        });
      }
    });
    if (widget.softKeyboard) {
      //渲染后 才能执软键盘弹出
      WidgetsBinding.instance.addPostFrameCallback((_) {
        FocusScope.of(context).requestFocus(widget.node);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: AlignmentDirectional.center,
      children: [
        Container(
          height: 38.w,
          padding: EdgeInsets.only(left: 6.w),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: const Color(0xffF0F0F0), width: 1.w),
          ),
          child: TextField(
              obscureText: _obscureText,
              focusNode: widget.node,
              controller: _controller,
              keyboardType: TextInputType.text,
              textInputAction: TextInputAction.done,
              onChanged: (value) {
                widget.onChangedValue(value);
                setState(() {
                  _showClearIcon = value.isNotEmpty;
                });
              },
              style: TextStyle(color: const Color(0xff222222), fontWeight: FontWeight.w400, fontSize: 14.sp),
              decoration: InputDecoration(
                counterText: '',
                //防止适配不居中
                isCollapsed: true,
                border: const OutlineInputBorder(borderSide: BorderSide.none),
                contentPadding: widget.contentPadding.w,
                hintText: '请输入',
                hintStyle: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w400, color: const Color(0xffA0A7B5)),
                suffixIcon: widget.suffixIcon
                    ? IconButton(
                        icon: Icon(!_obscureText ? Icons.visibility : Icons.visibility_off),
                        onPressed: () {
                          setState(() {
                            _obscureText = !_obscureText;
                          });
                        },
                      )
                    : null,
              )),
        ),
        Positioned(
          right: widget.suffixIcon ? 50.w : 10.w,
          child: Visibility(
            visible: _showClearIcon,
            child: SvgPicture.asset(
              Assets.svgIconInfoDelect,
              width: 20.w,
            ),
          ).clickOnce(() {
            setState(() {
              _controller.clear();
              _showClearIcon = false;
            });
            widget.clickOnce();
          }), //1.点击后删除内容；2.图标隐藏
        )
      ],
    );
  }
}
